<template>
	<view>
		<!-- 我的基本信息 -->
		<view class="myInfo">
			<u-avatar class="headPicture" :src="team.image" size="80" @click="goToImage"></u-avatar>
			<view style="font-weight: 800;" @click="editName">{{team.name}}</view>
			<view style="font-weight: 600;">TID:{{team.teamId}}</view>
		</view>

		<view
			style="box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;text-align: center; padding: 5vw 0; margin: 2vw 5vw;"
			@click="editNotes">
			本群昵称：<text>{{myInfo.notes}}</text>
		</view>

		<view
			style="box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;height: 40px;line-height: 40px; text-align: center;margin: 0 5vw;"
			@click="show=!show">
			邀请好友
		</view>

		<view v-if="show">
			<view class="approve">
				<checkbox-group @change="checkboxChange">
					<label v-for="(item,index) in inviteList" :key="index">
						<view class="one">
							<checkbox :value="item.userId" :checked="item.checked" v-if="en" />
							<checkbox :value="item.friendId" :checked="item.checked" v-else />

							<text v-if="en">{{item.name}}</text>
							<text v-else>{{item.notes}}</text>
						</view>

					</label>
				</checkbox-group>
			</view>

			<view class="approve">
				<view class="one">
					<text v-for="item in haveChoseName" style="margin-left: 5px;">{{item}}</text>
				</view>
			</view>

			<view v-if="haveChoseName.length!=0" @click="send" class="send">
				邀请
			</view>
		</view>

		<view style="box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;text-align: center;margin: 2vw 5vw;">
			群成员
		</view>
		<view class="members" v-for="(item,index) in members" :key="item.userId" hover-class="listHover"
			@longpress="delMember(item.memberId,index,item.userId)">
			<image :src="item.image" mode="aspectFit"></image>
			<view class="userInfoBox">
				<view class="userInfo">
					{{item.notes}}
					<text v-if="team.adminId==item.userId" style="color: red;">群主</text>
				</view>

				<view class="message">
					{{item.account}}
				</view>
			</view>
		</view>

		<view v-if="team.adminId==userId" class="send" @click="backall" style="background-color: red;">
			解散群聊
		</view>

		<view v-else @click="back" class="send" style="background-color: red;">
			退出群聊
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: "",
				teamId: "",
				team: {},
				members: [],
				myInfo: {},
				inviteList: [],
				haveChoseId: [],
				haveChoseName: [],
				show: false,
				en: false
			};
		},
		onLoad(e) {
			this.userId = uni.getStorageSync("userId");
			this.teamId = e.teamId;
			this.getTeam();
			this.getMembers();
			this.getMyInfo();
			this.getCanInvite();
			if (uni.getStorageSync("enterprise").enterpriseId != 0) {
				this.en = true;
			}
		},
		methods: {
			checkboxChange: function(e) {
				var items = this.inviteList,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (this.en) {
						if (values.includes(item.userId)) {
							this.$set(item, 'checked', true)
							let i = this.haveChoseId.indexOf(item.userId)
							if (i == -1) {
								this.haveChoseId.push(item.userId)
								this.haveChoseName.push(item.name)
							}
						} else {
							this.$set(item, 'checked', false)
							let i = this.haveChoseId.indexOf(item.userId)
							if (i != -1) {
								this.haveChoseId.splice(i, 1)
								this.haveChoseName.splice(i, 1)
							}
						}
					} else {
						if (values.includes(item.friendId)) {
							this.$set(item, 'checked', true)
							let i = this.haveChoseId.indexOf(item.friendId)
							if (i == -1) {
								this.haveChoseId.push(item.friendId)
								this.haveChoseName.push(item.notes)
							}
						} else {
							this.$set(item, 'checked', false)
							let i = this.haveChoseId.indexOf(item.friendId)
							if (i != -1) {
								this.haveChoseId.splice(i, 1)
								this.haveChoseName.splice(i, 1)
							}
						}
					}

				}
			},
			goToImage() {
				if (this.team.adminId == this.userId) {
					let that = this;
					uni.chooseImage({
						sourceType: ['album'], //从相册选择
						count: 1,
						success(res) {
							let filePath = res.tempFilePaths[0]
							uniCloud.uploadFile({
								filePath: filePath,
								cloudPath: Math.floor(Math.random() * 900000000) + 100000000 + '.jpg',
								success(res) {
									that.team.image = res.fileID;
									uni.request({
										url: getApp().url + 'team/updateTeam',
										data: {
											teamId: that.teamId,
											image: res.fileID
										},
										header: {
											token: uni.getStorageSync("token")
										},
										method: "POST",
										success: (res) => {
											console.log(res)
										},
										fail: (error) => {
											console.log(error);
										}
									})
								}
							});
						}
					});
				}

			},
			editName() {
				if (this.team.adminId == this.userId) {
					let that = this;
					uni.showModal({
						title: "请输入要更改的群名称：",
						editable: true,
						success: function(res) {
							if (res.confirm) {
								if (res.content == "") {
									uni.showToast({
										icon: "error",
										title: "群名称为空"
									})
								} else {
									that.team.name = res.content;
									uni.request({
										url: getApp().url + 'team/updateTeam',
										data: {
											teamId: that.teamId,
											name: res.content
										},
										header: {
											token: uni.getStorageSync("token")
										},
										method: "POST",
										success: (res) => {
											console.log(res)
										},
										fail: (error) => {
											console.log(error);
										}
									})
								}
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}
			},
			editNotes() {
				let that = this;
				uni.showModal({
					title: "请输入要更改的群内昵称：",
					editable: true,
					success: function(res) {
						if (res.confirm) {
							if (res.content == "") {
								uni.showToast({
									icon: "error",
									title: "群内昵称为空"
								})
							} else {
								that.myInfo.notes = res.content;
								uni.request({
									url: getApp().url + 'member/updateMember',
									data: {
										memberId: that.myInfo.memberId,
										notes: res.content
									},
									header: {
										token: uni.getStorageSync("token")
									},
									method: "POST",
									success: (res) => {
										console.log(res)
									},
									fail: (error) => {
										console.log(error);
									}
								})
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			delMember(memberId, index, userId) {
				if (this.team.adminId == this.userId && this.userId != userId) {
					let that = this;
					uni.showModal({
						title: '提示',
						content: '确认要踢出此成员吗？',
						success: function(res) {
							if (res.confirm) {
								uni.request({
									url: getApp().url + 'member/delMember',
									data: {
										memberId: memberId
									},
									header: {
										token: uni.getStorageSync("token")
									},
									method: "GET",
									success: (res) => {
										console.log(res);
										that.members.splice(index, 1);
									},
									fail: (error) => {
										console.log(error);
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			getTeam() {
				uni.request({
					url: getApp().url + 'team/getTeam',
					data: {
						teamId: this.teamId
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "GET",
					success: (response) => {
						if (response.data.code == -1) {
							return uni.showToast({
								icon: "error",
								title: response.data.msg
							});
						};
						this.team = response.data.data;
					},
					fail: (error) => {
						console.log(error);
					}
				})
			},
			getMembers() {
				uni.request({
					url: getApp().url + 'member/getMemberList',
					data: {
						teamId: this.teamId
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "GET",
					success: (response) => {
						if (response.data.code == -1) {
							return uni.showToast({
								icon: "error",
								title: response.data.msg
							});
						};
						this.members = response.data.data;
					},
					fail: (error) => {
						console.log(error);
					}
				})
			},
			getMyInfo() {
				uni.request({
					url: getApp().url + 'member/getMember',
					data: {
						teamId: this.teamId,
						userId: uni.getStorageSync("userId")
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "GET",
					success: (response) => {
						if (response.data.code == -1) {
							return uni.showToast({
								icon: "error",
								title: response.data.msg
							});
						};
						this.myInfo = response.data.data;
					},
					fail: (error) => {
						console.log(error);
					}
				})
			},
			getFriendCanInvite() {
				uni.request({
					url: getApp().url + 'friendList/getCanInvite',
					data: {
						teamId: this.teamId,
						userId: uni.getStorageSync("userId")
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "GET",
					success: (response) => {
						if (response.data.code == -1) {
							return uni.showToast({
								icon: "error",
								title: response.data.msg
							});
						};
						this.inviteList = response.data.data;
					},
					fail: (error) => {
						console.log(error);
					}
				})
			},
			getStaffCanInvite() {
				uni.request({
					url: getApp().url + 'staff/getCanInvite',
					data: {
						teamId: this.teamId,
						enterpriseId: uni.getStorageSync("enterprise").enterpriseId
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "GET",
					success: (response) => {
						if (response.data.code == -1) {
							return uni.showToast({
								icon: "error",
								title: response.data.msg
							});
						};
						this.inviteList = response.data.data;
					},
					fail: (error) => {
						console.log(error);
					}
				})
			},
			getCanInvite() {
				if (uni.getStorageSync("enterprise").enterpriseId == 0) {
					this.getFriendCanInvite();
				} else {
					this.getStaffCanInvite();
				}
			},
			send() {
				uni.request({
					url: getApp().url + 'member/addMemberList',
					data: {
						userId: this.haveChoseId,
						enterpriseId: uni.getStorageSync("enterprise").enterpriseId,
						teamId: this.teamId
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "GET",
					success: (response) => {
						if (response.data.code == -1) {
							return uni.showToast({
								icon: "error",
								title: response.data.msg
							});
						};
						uni.showToast({
							icon: "success",
							title: "提交成功"
						});

						setTimeout(() => {
							this.haveChoseId=[];
							this.haveChoseName=[];
							this.getCanInvite();
						}, 1000)
					},
					fail: (error) => {
						console.log(error);
					}
				})
			},
			backall() {
				uni.request({
					url: getApp().url + 'member/nullMember',
					data: {
						teamId: this.teamId
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "GET",
					success: (response) => {
						if (response.data.code == -1) {
							return uni.showToast({
								icon: "error",
								title: response.data.msg
							});
						};
						uni.showToast({
							icon: "success",
							title: "提交成功"
						});

						setTimeout(() => {
							if (uni.getStorageSync("enterprise").enterpriseId == 0) {
								uni.switchTab({
									url: "/pages/person/index/index"
								})
							} else {
								uni.switchTab({
									url: "/pages/enterprise/index/index"
								})
							}
						}, 1000)
					},
					fail: (error) => {
						console.log(error);
					}
				})
			},
			back() {
				uni.request({
					url: getApp().url + 'member/backMember',
					data: {
						userId: this.userId,
						teamId: this.teamId
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "GET",
					success: (response) => {
						if (response.data.code == -1) {
							return uni.showToast({
								icon: "error",
								title: response.data.msg
							});
						};
						uni.showToast({
							icon: "success",
							title: "提交成功"
						});

						setTimeout(() => {
							if (uni.getStorageSync("enterprise").enterpriseId == 0) {
								uni.switchTab({
									url: "/pages/person/index/index"
								})
							} else {
								uni.switchTab({
									url: "/pages/enterprise/index/index"
								})
							}
						}, 1000)
					},
					fail: (error) => {
						console.log(error);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.myInfo {
		margin: 10vw 5vw 0vw 5vw;
		padding: 0 5vw 5vw 5vw;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.headPicture {
			position: relative;
			bottom: 5vw;
		}
	}

	.members {
		display: flex;
		margin: 2px 5vw;
		padding: 2vw;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

		image {
			width: 16vw;
			height: 16vw;
			border-radius: 8vw;
		}

		.userInfoBox {
			width: 70vw;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.userInfo {
				display: flex;
				justify-content: space-between;
				margin: 0 2vw;
			}

			.message {
				display: flex;
				justify-content: space-between;
				margin: 0 2vw;
				font-size: small;
				color: #A09D9D;
			}
		}
	}

	.approve {
		max-height: 30vh;
		margin: 0 5vw;
		overflow: scroll;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

		.one {
			margin-left: 5vw;
			margin-top: 2vw;
			margin-bottom: 2vw;
		}
	}

	.send {
		margin: 30px 5vw;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		text-align: center;
		color: #FFF;
		background-color: #41A863;
	}
</style>